<!-- 登录注册模块 -->
<template>
	<div>
		<div @click="drawer = true" class="login-registration-icon-box">
			<el-avatar icon="el-icon-user-solid" v-show="showElAvatar" :src="avatarURL"></el-avatar>
		</div>
		<div class="login">
			<!-- <el-drawer :visible.sync="drawer" size="20%"  @open="showElAvatar=false" @close="showElAvatar=true" -->
			<el-drawer :visible.sync="drawer" size="20%"  @open="openDrawer" @close="closeDrawer"
				:append-to-body="true" :with-header="false">
				<div>
					<el-avatar :src="avatarURL" icon="el-icon-user-solid" class="icon-conent"></el-avatar>
					<p class="user-msg-conent"> 张三</p>
				</div>
				<div class="motto">
					<p class="line">{{mottoData}}</p>
				</div>
				<div class="butn">
					<el-button size="medium" v-show="showBtn" :round='true' @click="signIn">登录</el-button>
					<el-button size="medium" v-show="!showBtn" :round='true' @click="signOut">退出登录</el-button>
					<el-button size="medium" v-show="showBtn" :round='true' @click="register">注册</el-button>
				</div>
			</el-drawer>
		</div>

	</div>
</template>

<script>
	//引入头像图片
	// import avatarURL from '@/assets/images/rookie-head.png'
	import jwtDecode from 'jwt-decode';
	// //引入vuex简写形式
	// import {
	// 	mapState
	// } from 'vuex'
	// //引入axios
	 import axios from 'axios'
	

	import {
		devUserManagementUrl
	} from '@/api/apiconst'


	export default {
		name: 'LoginRegistration',
		data() {
			return {
				drawer: false,
				avatarURL: "",
				showElAvatar: true,
				showBtn: true,
				mottoData: "We are meant to be"
			};
		},
		// computed: {
		// 	...mapState({
		// 		mottoConten: 'mottoData'
		// 	}),
		// },
		mounted() {
			//调用store.js中的mutations下的setMottoData方法
			//this.$store.commit("setMottoData", null);
		
			//渲染用户信息
			let token = localStorage.getItem("token");
			if (token !== '' && token !== null) {
				//解析用户信息
				const userInfo = jwtDecode(token);
				//判断当前时间是否小于token的有效时间
				if (new Date().getTime() < new Date(userInfo.exp * 1000).getTime()) {
					this.avatarURL = userInfo.avatarLink;
					//隐藏登录按钮
					this.showBtn = false;
					
				}

			}




		},
		methods: {
			signOut() {
				// 清除token
				localStorage.removeItem('token');

				window.location.href = "/#/login";
			},
			signIn() {
				//跳转到登录界面
				this.$router.push({
					path: "/login"
				});
			},
			register() {
				//跳转到注册界面
				this.$router.push({
					path: "/register"
				});
			},
			openDrawer(){
				this.showElAvatar=false;
				// console.log("打开")
			// 	 this.mottoTime=setInterval(()=>{
			// 		    axios.get('http://localhost:8089/get?type=social').then(
			// 		                  response => {
			// 		                    this.mottoData = response.data
			// 		                  },
			// 		                  error => {
			// 		                      console.log(error.message)
			// 		                  }
			// 		              )
			// 	  }, 10000);
			
			},
			closeDrawer(){
				this.showElAvatar=true;
				//清除定时器
				if (this.mottoTime) {
					clearInterval(this.mottoTime); 
				}
				console.log("关闭了")
			}

		}

	}
</script>


<style>
	.login-registration-icon-box {
		width: max-content;
	}

	.el-drawer {
		opacity: 0.5;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.butn {
		position: absolute;
		left: 32%;
		bottom: 130px
	}

	.user-msg-conent {
		position: absolute;
		left: 133px;
		margin: 178px 0px;
	}

	.motto {
		color: white;
		margin: 215px 20px;
		font-weight: bold;
		font-size: 0.2rem;
	}

	.line {
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		animation: grow 2s steps(70) 0s normal both, blink 200ms infinite normal;
	}

	/*下一段延时执行动画*/
	@keyframes grow {
		from {
			width: 0;
		}

		to {
			width: 100%;
			/*段落长度 */
			border-right-color: transparent;
		}

		0% {
			border-right: 0;
		}

		/*光标起始位置不显示*/
		1% {
			border-right: 2px solid #000;
		}

		/*光标显示*/
		99% {
			border-right: 2px solid #000;
		}

		100% {
			border-right: 0;
		}

		/*结束位置光标不显示*/
	}

	@keyframes blink {
		from {
			border-right-color: #000;
		}

		to {
			border-right-color: transparent;
			/*文字透明化*/
		}
	}

	.icon-conent {
		height: 100px;
		width: 100px;
		/* background: url("@/assets/images/rookie-head.png"); */
		background-size: cover;
		position: absolute;
		left: 34%;
		box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 16px 0px;
		margin: 70px 0px;
		border-radius: 50%;
		/* font-size: 80px; */
	}
</style>
